<template>
	<view class="team">
		<!-- 选择组 -->
		<view class="team-select">
			<view class="select" v-for="(item,idx) in formConfigList" :key="idx" @tap="openPicker(item)">
				<view class="label">
					{{item.text}}
				</view>
				<view class="content">
					<u--input input-align="center" :value="params[item.name]" disabled disabledColor="#ffffff"
						placeholder="" border="none" suffixIcon="arrow-down"
						suffixIconStyle="font-size:12px"></u--input>
				</view>
			</view>
		</view>
		<!--标签组 -->
		<view class="team-tabs">
			<view class="tab" :class="[type===1?'active':'']" @tap="tabClick(1)">
				组员积分
			</view>
			<view class="tab" :class="[type===2	?'active':'']" @tap="tabClick(2)">
				分组排名
			</view>
		</view>
		<!-- BIAOGE -->
		<team-table v-if="type===1" :columns="columns" :tableData="tableData"></team-table>
		<group-ranking :columns="columns" :tableData="tableData" v-else></group-ranking>

		<!-- 城市 分组 -->
		<u-picker :key="pickerKey" @cancel="show=false" keyName="text" @confirm="getValue" :show="show"
			:columns="datalist"></u-picker>
		<u-datetime-picker ref="time" @cancel="timeShow=false" :show="timeShow" @confirm="getTimeValue"
			:value="formatParamTime(params.date, 'date')" :mode="timeConfig.mode"></u-datetime-picker>
	</view>
</template>

<script>
	import teamTable from './components/teamTable.vue'
	import groupRanking from './components/groupRanking.vue'
	import {
		getTeamInfo,
		getTeamList,
		getTeamFormConfig
	} from '@/api'
	export default {
		async onLoad() {
			await this.getFormConifg()
			await this.type === 1 ? this.getInfo() : this.getInfoTwo()
		},
		components: {
			teamTable,
			groupRanking
		},
		data() {
			return {
				timeShow: "",
				pickerKey: Math.random(),
				type: 1,
				show: false,
				timeShow: false,
				params: {
					team_id: "",
					date: "",
					area: "",
				},
				columns: [],
				tableData: [],
				formConfigList: [],
				datalist: [],
				timeConfig: {
					mode: 'year-month'
				}
			}
		},
		methods: {
			// 时间
			getTimeValue(e) {
				this.params.date = this.formatParamTime(e.value, 'date')
				this.timeShow = false
				this.type === 1 ? this.getInfo() : this.getInfoTwo()
			},
			// 城市和分组
			getValue({
				value
			}) {
				this.params[value[0]['name']] = value[0].value
				this.show = false
				this.type === 1 ? this.getInfo() : this.getInfoTwo()
			},
			openPicker(item) {
				// 区分一下是否是时间
				if (item.name === 'date') {
					this.timeConfig = item
					this.$refs.time.init()
					this.timeShow = true
				} else {
					this.show = true
					this.datalist.length = 0
					this.datalist.push([...item.datalist.map(o => {
						return {
							...item,
							...o
						}
					})])
				}
			},
			async getFormConifg() {
				let {
					data: formConfigList,
					code
				} = await getTeamFormConfig()
				if (code === 1) {
					this.formConfigList = formConfigList
					this.formConfigList.length > 0 ? this.formConfigList.forEach(o => {
						this.params[o.name] = o.valueDefault
					}) : null
				}
			},
			tabClick(index) {
				this.type = index
				this.tableData = []
				this.columns = []
				this.type === 1 ? this.getInfo() : this.getInfoTwo()
			},
			async getInfo() {
				let {
					data: {
						fieldItemList: columns,
						data: tableData
					}
				} = await getTeamInfo(this.params)
				this.tableData = tableData
				this.columns = columns
			},
			async getInfoTwo() {
				let {
					data: {
						fieldItemList: columns,
						data: tableData
					}
				} = await getTeamList(this.params)
				this.tableData = tableData
				this.columns = columns
			}
		}
	}
</script>

<style lang="scss" scoped>
	.team {
		&-select {
			padding: 35rpx 35rpx 0 35rpx;

			.select {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 35rpx;

				.label {
					width: 140rpx;
					text-align: center;
					font-size: 14px;
					line-height: 100%;
					position: relative;

					&:before {
						content: " ";
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						display: inline-block;
						position: absolute;
						background-color: #fdbf29;
						top: 8rpx;
						left: -10rpx;
					}
				}

				.content {
					width: calc(100% - 140rpx);
					border-bottom: 0.5px solid #cccccc;
					height: 70rpx
				}
			}
		}

		&-tabs {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-bottom: 35rpx;

			.tab {
				border: 2px solid #cccccc;
				width: 35%;
				text-align: center;
				line-height: 70rpx;
				color: #cccccc;
				font-size: 16px;
			}

			.active {
				border: 2px solid #fdbf29;
				color: #fdbf29;
				position: relative;

				&:before {
					content: " ";
					width: 29px;
					height: 26px;
					background: url('/static/image/wmon.png');
					position: absolute;
					bottom: -2rpx;
					right: -2rpx;
				}
			}
		}
	}
</style>